import React, { useEffect, useState } from "react";
import { Select, Spin } from "antd";

import http, { get } from "@/utils/request";
import Notfound from "../notFound/not-found";
const { Option } = Select

let timeout;

const ZCSelect = (props) => {
    const {
        url,//搜索地址，如果需要搜索就会用上
        defaultValue,//默认显示的value
        notFoundContent = "无可选项",//下拉 列表为空时显示的内容
        placeholder,
        showSearch = true,//配置是否可搜索 默认否
        size,//尺寸
        onInputKeyDown,//按钮按下时的回调：通常用来 按下去后 去搜索数据
        allowClear = true,//支持清除？默认否
        fieldNames = null,
    } = props
    const [data, setData] = useState(props.options || []);//下拉列表框
    const [value, setValue] = useState();//输入框的值
    const [loading, setLoading] = useState(false);//是否在加载中


    // 搜索处理
    const handleSearch = (newValue) => {

        // if (newValue) {
        if (showSearch) {

            fetchSearch(newValue, setData);
        }
        // fetch(newValue || "测试", setData);
        // } else {
        //     setData([]);
        // }


    };
    const handleChange = (newValue) => {
        setValue(newValue);
    };

    // // 监听选择框的值
    // useEffect(() => {
    //     console.log("当前选择框的最新值：\n", value)
    // }, [value])
    // 搜索事件
    const fetchSearch = async (value, callback) => {
        setFetching(true)
        // 延时处理
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }

        const fake = async () => {
            http.get({
                url,
                params: {
                    code: "utf-8",
                    queryStr: value
                },
                before: () => setLoading(true),
                success: ({ data = undefined }) => {
                    callback(data);
                },
                failure: (error) => {
                    console.log(error)
                },
                complete: () => {
                    setLoading(false)
                    setFetching(false)
                }
            })

        }


        timeout = setTimeout(fake, 300);




    }




    // 如果是正在搜索中，则显示加载动画，搜索完成后 没有东西，则显示无可选项
    const getNotFoundContent = () => {
        if (loading) {
            return <Spin />
        } else {
            return notFoundContent;
        }
    }

    const [fetching, setFetching] = useState(false);
    return (

        <>
            <Select
                defaultValue={defaultValue}
                notFoundContent={<Notfound />}
                placeholder={placeholder}
                showSearch={showSearch}
                value={value}
                size={size}
                allowClear={allowClear} //支持清除
                // onFocus={() => handleSearch("")}  //鼠标按下去的时候就搜索
                defaultActiveFirstOption={false}
                showArrow={true}//显示图标
                filterOption={false}
                // onSearch={handleSearch}
                onChange={handleChange}
                loading={loading}
                {...props}
                fieldNames={fieldNames}
            >
                {
                    data.map((item, index) => {
                        return (
                            <Option key={index} value={item.value}>{item.label}</Option>
                        )
                    })
                }

            </Select>
        </>



    )
}

export default ZCSelect;